import React, {Component} from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import './App.css'

export default class App extends Component {
    //状态在哪，操作状态的方法就在哪
    state = {
        todos: [
            {id: 1, name: '吃饭', checked: true},
            {id: 2, name: '睡觉', checked: true},
            {id: 3, name: '打豆豆', checked: false}
        ]
    }
    addTodo = (todo) => {
        console.log(todo)
        const {todos} = this.state
        const newTodos = [todo, ...todos]
        this.setState({todos: newTodos})
    }
    updateTodos = (id, checked) => {
        const {todos} = this.state
        const newTodos = todos.map(todo => {
            if (todo.id === id) {
                return {...todo, checked}
            } else return todo
        })
        this.setState({todos: newTodos})
    }
    deleteTodo = (id) => {
        const {todos} = this.state
        const newTodos = todos.filter(todo => todo.id !== id)
        console.log(newTodos)
        this.setState({
            todos: newTodos
        })
    }
    checkAllTodo = (done) => {
        const {todos} = this.state
        const newTodos = todos.map((todo) => {
            return {...todo, checked: done}
        })
        this.setState({
            todos: newTodos
        })
    }
    clearAllChecked = () => {
        const {todos} = this.state
        const newTodos = todos.filter((todo) => !todo.checked)
        this.setState({
            todos: newTodos
        })
    }

    render() {
        const {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodos={this.updateTodos} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllChecked={this.clearAllChecked} />
                </div>
            </div>
        )
    }
}